<template>
	<view class="">
		<view class="main_top">
			<view class="head">
				<!-- <navigator url="/pages/user/setting/index"> -->
				<navigator url="/pages/user/set/set">
					<image class="ewm" src="../../../static/setIco.png" mode=""></image>
				</navigator>
				<navigator @click="scanQrcode">
					<image class="ewm" src="../../../static/userIco3.png" mode=""></image>
				</navigator>
			</view>
			<view class="userCar">
				<image class="userIco" :src="detail.avatarUrl" mode=""></image>
				<view class="userName">
					<view class="name">
						{{detail.nickName}}
					</view>
					<!-- <view class="num">
						关注 3.8w &nbsp;&nbsp;&nbsp; 帖子 1.2w
					</view> -->
				</view>
				<view class="FX1"></view>
			</view>
			<view class="menu">
				<navigator url="/pages/user/computational_power">
					<view class="menubox">
						<view class="value">
							{{detail.balance}}
						</view>
						<view class="text">
							算力
						</view>
					</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/user/contribution_value">
					<view class="menubox">
						<view class="value">
							{{detail.points}}
						</view>
						<view class="text">
							积分
						</view>
					</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/user/wallet/index">
					<view class="menubox">
						<view class="value">
							{{agentMoney}}
						</view>
						<view class="text">
							佣金
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="main_bottom">
			<view class="vip">
				<view class="vipbox">
					<view class="vipText">
						我的会员
					</view>
					<view class="vipGrade">
						{{ userGrade }}
					</view>
					<view class="FX1"></view>
					<navigator url="/pages/user/vip/index">
						<image class="vipIco" src="../../../static/userIco2.png" mode=""></image>
					</navigator>
				</view>
			</view>
			<view class="bg">
				<view class="functionTitle">
					常见功能
				</view>
				<view class="functionList">
					<!-- <navigator url="/pages/user/invitation" class="functionBox"> -->
					<view @click="gotoPage('/pages/agent/index/index?appId=10002')" class="functionBox">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco7.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								我的邀约
							</view>
							<view class="subtitle">
								邀请好友
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>
					<view class="functionBox" @click="gotoPage('/pages/user/aiuse/index')">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco8.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								我的应用
							</view>
							<view class="subtitle">
								随时查看
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>
					<view class="functionBox" @click="gotoPage('/pages/user/wallet/index')">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco6.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								数字资产
							</view>
							<view class="subtitle">
								数字资产
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>

					<view class="functionBox" @click="gotoPage('/pages/order/myorder?dataType=all&appId=10002')">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco11.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								我的课程
							</view>
							<view class="subtitle">
								每日学习
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>
					<view class="functionBox" @click="gotoPage('/pages/user/my-post/index')">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco9.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								我的AI宇宙
							</view>
							<view class="subtitle">
								交流沟通
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>
					<view @click="gotoPage('/pages/user/contact_us')" class="functionBox">
						<view class="icon icon1">
							<image class="" src="../../../static/userIco10.png" mode=""></image>
						</view>
						<view class="tex">
							<view class="title">
								联系我们
							</view>
							<view class="subtitle">
								有问题找我们
							</view>
						</view>
						<view class="FX1"></view>
						<image class="to" src="../../../static/to2.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<tabBar></tabBar>
</template>

<script>
	export default {
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				detail: {
					balance: 0,
					points: 0,
					grade: {
						name: ''
					},
				},
				orderCount: {},
				msgCount: 0,
				userGrade: '',
				agentMoney:0
			}
		},
		onShow() {
			/*获取个人中心数据*/
			this.getData();
			// this.getPage();
			// this.getTabBarLinks();
		},
		onLoad() {
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user/index/index', {
					source: self.getPlatform()
				}, function(res) {
					if (res.data.getPhone) {
						//#ifdef MP-WEIXIN
						self.gotoPage('/pages/login/bindmobile');
						//#endif
						//#ifndef MP-WEIXIN
						self.bindMobile();
						//#endif
						return;
					}
					// self.getPage();
					// self.getTabBarLinks();
					self.serviceUserId = res.data.serviceUserId;
					self.detail = res.data.user;
					//保存用户信息
					uni.setStorageSync('userData', res.data.user);
					// self.coupon = res.data.coupon;
					self.orderCount = res.data.orderCount;
					// self.menus = res.data.menus;
					// self.invitation = res.data.invitation;
					// self.setting = res.data.setting;
					self.userGrade = res.data.userGrade;
					self.agentMoney = res.data.agentMoney;
					//保存用户等级
					uni.setStorageSync('userGrade', res.data.userGrade);
					self.msgCount = res.data.msgCount;
					self.loadding = false;
					uni.hideLoading();
				});
			},
			/*扫一扫核销*/
			scanQrcode: function() {
				let self = this;
				//#ifdef H5
				// 只允许通过相机扫码
				self.jweixin.scanQRCode({
					needResult: 1,
					scanType: ["qrCode", "barCode"],
					success: function(res) {
						self.gotoPage('/pages/store/clerkorder?orderNo=' + res.resultStr);
					},
					error: function(res) {
						uni.showToast({
							title: '扫码失败，请重试'
						})
					}
				});
				//#endif
				//#ifndef H5
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.errMsg == 'scanCode:ok') {
							self.gotoPage('/pages/store/clerkorder?orderNo=' + res.result);
						} else {
							uni.showToast({
								title: '扫码失败，请重试'
							})
						}
					}
				});
				//#endif
			},
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
		
	}
</style>
<style lang="scss" scoped>
	.main_top {
		width: 750rpx;
		height: 650rpx;
		background-image: url('../../../static/userIco12.png');
		background-size: 100% 100%;
		margin-bottom: 54rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: end;
			padding-top: 108rpx;
			text-align: right;

			.ewm {
				margin-right: 50rpx;
				width: 45rpx;
				height: 45rpx;
			}

		}

		.userCar {
			padding: 43rpx 36rpx 0 40rpx;
			display: flex;
			align-items: center;

			.userIco {
				width: 120rpx;
				height: 120rpx;
				background: #0F4BCB;
				border-radius: 60rpx;
				margin-right: 21rpx;
			}

			.userName {
				color: #FFFFFF;

				.name {
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}

				.num {
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}


		}

		.menu {
			display: flex;
			align-items: center;
			justify-content: space-around;
			// width: 650rpx;
			height: 160rpx;
			margin-left: 127rpx;
			margin-right: 127rpx;
			margin-top: 70rpx;

			.menubox {
				text-align: center;

				.value {
					font-weight: 300;
					font-size: 36rpx;
					color: #000000;
					margin-bottom: 8rpx;
				}

				.text {
					font-weight: 300;
					font-size: 24rpx;
					color: #000000;
				}
			}

			.line {
				border-right: 1px solid #FFFFFF;
				width: 2rpx;
				height: 60rpx;
			}
		}
	}

	.main_bottom {
		width: 750rpx;
		min-height: 795rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -17rpx 21rpx 3rpx rgba(7, 67, 200, 0.28);
		position: relative;
		background-color: #FFFFFF;

		.vip {
			position: absolute;
			top: -117rpx;
			left: 50rpx;
			width: 650rpx;
			height: 151rpx;
			background-image: url('../../../static/userIco1.png');
			background-size: 100% 100%;

			.vipbox {
				display: flex;
				align-items: center;
				margin: 40rpx 32rpx 0 50rpx;

				.vipText {
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-right: 18rpx;
				}

				.vipGrade {
					text-align: center;
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: linear-gradient(-90deg, rgba(255, 67, 95, 0.99), rgba(255, 164, 77, 0.99));
					border-radius: 20rpx;
					font-weight: 300;
					font-size: 22rpx;
					color: #FFFFFF;
				}

				.vipIco {
					width: 45rpx;
					height: 45rpx;
				}
			}

		}

		.bg {
			background-color: #FFFFFF;
			position: absolute;
			top: -0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;

			.functionTitle {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-top: 67rpx;
				margin-left: 50rpx;
				margin-bottom: 43rpx;
			}

			.functionList {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 0 30rpx;
			}

			.functionBox {
				width: calc(335rpx - 36rpx);
				height: calc(130rpx - 36rpx);
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 22rpx 5rpx rgba(137, 137, 137, 0.12);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				padding: 18rpx;
				margin-bottom: 42rpx;

				.icon {
					width: 95rpx;
					height: 95rpx;
					background-image: url('../../../static/userIco4.png');
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 22rpx;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.icon1 {
					background-image: url('../../../static/userIco5.png');
				}

				.title {
					font-weight: 300;
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 13rpx;
				}

				.subtitle {
					font-weight: 300;
					font-size: 22rpx;
					color: #999999;
				}

				.to {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>